import React, { Component } from 'react';
import {
  Table,
  Modal,
  message,
  Badge
} from 'antd';
import http from '../../axios';
import moment from 'moment'
import { appendArrayKeys } from "../../utils";
import '../../style/common.less';
import './Todo.less'

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: false,
      newModalVisible: false,
      editData: null,
      selectedRowKeys: [],
      pagination: {
        current: 1,
        pageSize: 5,
        total: 0
      }
    }
  }

  columns = [
    {title: '标题', dataIndex: 'title', key: 'title', render: (text, record) => <span><Badge status={record.diffStatus} />{record.title}</span>},
    {title: '完成时间', dataIndex: 'time', key: 'time', width: '100px'}
  ]
  
  getList = () => {
    this.setState({
      loading: true
    })
    const {pagination} = this.state;
    const pag = {
      _p: pagination.current,
      _size: pagination.pageSize
    }
    http.todo.getDoingList({...pag}).then((r) => {
      const data = appendArrayKeys(this.dealData(r));
      const selectedRowKeys = this.getSelectedRowKeys(r);
      this.setState({
        data,
        selectedRowKeys
      })

      return http.todo.getListCount();
    }).then((r) => {
      pagination.total = r[0].no_of_rows;
      this.setState({
        loading: false,
        pagination
      })
    })
  }

  getSelectedRowKeys = (array) => {
    return array.map((value, index) => {
      return value.status === 1 ? index : null;
    }).filter((value) => {
      return typeof value === 'number';
    })
  }

  newTodo = () => {
    this.setState({
      editData: null,
      newModalVisible: true
    })
  }
  
  editTodo = (values) => {
    this.setState({
      editData: values,
      newModalVisible: true
    })
  }

  deleteTodo = (id) => {
    Modal.confirm({
      title: '确认删除？',
      onOk: () => {
        http.todo.deleteList({
          id
        }).then((r) => {
          this.getList();
        })
      },
      onCancel: () => {
        
      },
      okText: '确认',
      cancelText: '取消'
    })
    
  }

  handleOk = (values, cb) => {
    const { id, title, content, time } = values;
    const params = {
      id,
      title,
      content,
      time: moment(time).format('YYYY-MM-DD'),
      status: 0 // 0 -- 未完成  1 -- 已完成
    }
    if (typeof id === 'number') {
      http.todo.editList(params).then(() => {
        this.setState({
          newModalVisible: false
        })
        message.success('编辑成功');
        this.getList();
        cb && cb();
      }).catch(() => {
        this.setState({
          newModalVisible: false
        })
        cb && cb();
      })
    } else {
      http.todo.newList(params).then(() => {
        this.setState({
          newModalVisible: false
        })
        message.success('新增成功');
        this.getList();
        cb && cb();
      }).catch(() => {
        this.setState({
          newModalVisible: false
        })
        cb && cb();
      })
    }
  }

  handleCancel = () => {
    this.setState({
      newModalVisible: false
    })
  }

  dealData = (array) => {
    let mom;
    return array.map((value) => {
      mom = moment(value.time)
      const diff = mom.diff(moment()) / 1000 / 60 / 60;
      value.time = mom.format('YYYY-MM-DD');
      value.diffStatus = this.getDiffStatus(diff, value.status);
      return value;
    })
  }
  getDiffStatus = (diff, status) => {
    if (status === 1) {
      return 'default'
    } else if (diff < 1 * 24) {
      return 'error'
    } else if (diff < 2 * 24) {
      return 'warning'
    } else if (diff < 3 * 24) {
      return 'processing'
    } else{
      return 'success'
    }
  }

  onSelectChange = (selectedRowKeys) => {
    this.setState({
      selectedRowKeys
    })
  }
  handleTableChange = (pagination) => {
    const pag = this.state.pagination;
    pag.current = pagination.current;
    this.setState({
      pagination: pag
    })
    setTimeout(() => {
      this.getList();
    }, 0);
  }

  componentWillMount() {
    this.getList()
  }
  render() {
    
    const { data, loading, newModalVisible, editData, selectedRowKeys, pagination } = this.state;

    const rowSelection = {
      onSelect: (record, selected, selectedRows) => {
        const { id } = record;
        const status = selected ? 1 : 0
        http.todo.editList({
          id,
          status
        })
        return true;
      },
      onChange: this.onSelectChange,
      selectedRowKeys
    }
    return (
      <div className={loading ? 'loading container' : 'container'}>
        <Table 
          loading={loading}
          columns={this.columns}
          rowSelection={rowSelection}
          expandedRowRender={record => <p style={{ margin: 0 }}>{record.content}</p>}
          dataSource={data}
          pagination={pagination}
          onChange={this.handleTableChange}
          scroll={{x: 700}}
        />
      </div>
    )
  }
}

export default Todo;